<template>
  <div v-if="dialogVisible">
    <el-dialog
      v-model="props.dialogVisible"
      :title="`选择我的兴趣技能&nbsp;&nbsp;&nbsp;&nbsp${avocationForm.selectedAvocationList.length}/7`"
      :style="{width:'1024px'}"
    >
      <el-form
        :inline="true"
        :model="avocationForm.avocationList"
        class="demo-form-inline"
      >
        <el-form-item>
          <el-input prefix-icon="ele-Search"  v-model="avocationForm.search" placeholder="搜索兴趣技能" />
        </el-form-item>
        <el-form-item>
          <el-button type="default" @click="">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 已选择 兴趣技能 -->
      <div class="select-avocation">

          <div
            class="tag-list"
            
          >
            <div class="tag-item" v-for="item in avocationForm.selectedAvocationList" >
              <span>{{ item.name }}</span>
              
              <Close @click="remove(item)" class="icon-style-close" />
               

            </div>
          </div>
      </div>

      <!-- 推荐兴趣技能 -->
      <div class="avocation-wrapper">
        <span>推荐兴趣技能</span>
        <div class="avocation">
          <div
            class="tag-list infinite-list"
            v-infinite-scroll="load"   style="overflow: auto"

          >
          
            <div class="tag-item" :class="item.isSelected?'tag-item-selected':''"  v-for="item in avocationForm.avocationList" @click="select(item)" :key="item.id">
              <span>{{ item.name }}</span>
              
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="$emit('handleDialog',false)" class="first"
            >取消</el-button
          >
          <el-button type="primary" @click="emit('handleDialog')" class="last">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { Close,CircleCloseFilled } from "@element-plus/icons-vue";
export default defineComponent({
    name: "",
    components: { Close,CircleCloseFilled }
});
</script>

<script setup lang="ts">
import { ref, onMounted,watch } from "vue";
import { getAvocationsApi } from "@/api/public/index";
import type { Data, Content } from "@/api/public/interface/avocation";
const props = defineProps(['dialogVisible'])
const emit = defineEmits(['handleDialog'])
watch(()=>props.dialogVisible, (val) => {
    console.log('dialogVisible',val);
})

//  watch(() => props.dialogVisible, (val) => {
    //         console.log(val,'vallll')
    //         dialogVisible.value = val
    //     })
    // const {dialogVisible}=props
    // const dialogVisible = ref(true);
// dialogVisible.value = props.dialogVisible


// defineProps<{dialogVisible:boolean}>()
// defineEmits<{
//   (event:"update:dialogVisibleValue"):void
// }>()
// defineProps<{
//   dialogVisible:number
// }>()


interface defalutType {
  search: string;
  number: number;
  pageSize: number;
  avocationList: Content[];
  selectedAvocationList: Content[];
}
// form 收集数据
const avocationForm = ref<defalutType>({
  search: "",
  number: 0,
  pageSize: 20,
  avocationList: [],
  selectedAvocationList: [],
});
// watch(['avocationForm'], (val) => {
//     console.log('avocationForm',val);
// })

// 获取兴趣列表 异步函数
const getAvocationList = async (number: number, pageSize: number) => {
  try {
    const result = await getAvocationsApi(number, pageSize);
    console.log("getAvocationList result", result);
    //   const setSelectFlagContent = result.content.map(item => {
    //     item.isSelected=false
    // })
    avocationForm.value.avocationList = [
      ...avocationForm.value.avocationList,
      ...result.content ,
      ];
    // set flag
      avocationForm.value.avocationList.forEach(item => {
        item.isSelected=false
    })
    // 请求过一次后下次请求下一页数据
    avocationForm.value.number++;
  } catch (error) {}
};
onMounted(async () => {
  try {
    // 初始化请求
      getAvocationList(avocationForm.value.number, avocationForm.value.pageSize);
    // getAvocationList(avocationForm.value.number, avocationForm.value.pageSize);
    
  } catch (error) {}
});
const load = () => {
    console.log('获取下一页列表数据');
    getAvocationList(avocationForm.value.number, avocationForm.value.pageSize);

};
// 添加兴趣
const select = (item: Content) => {
    // 逻辑判断
    // 1.不能重复添加相同
    let flag = false
    
    avocationForm.value.selectedAvocationList.forEach(i => {
        if (i.id === item.id) {
            console.log('xiangtong', i.id);
        flag=true
        return 
        } else {
        
        }
    })
    // 最多添加7个
    if (avocationForm.value.selectedAvocationList.length === 7) {
        console.log('超过7个');
        return
    }
    if (!flag) {
        
        item.isSelected=true
        avocationForm.value.selectedAvocationList.push(item);
    }
};
// 移除已选择兴趣
const remove = (item: Content) => {
    
    console.log('remove', item);
    
    avocationForm.value.selectedAvocationList= avocationForm.value.selectedAvocationList.filter(i => {
        return i.id!==item.id
    })
    avocationForm.value.avocationList.forEach(i => {
        if (i.id === item.id) {
            i.isSelected=false
        }
    })
}

</script>

<style lang="less" scoped>

.tag-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .tag-item{
    min-width: 100px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #eaecf0;
    color: #111;
    background-color: #fff;
    cursor: pointer;
    margin: 0 22px 21px 0;
    display: inline-block;
    font-size: 12px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    // position: relative;

}
    .tag-item-selected{
        background-color:#f93684;
    }
}

.icon-style-close{
    width: 20px;
    // position: relative;
    // right: 100px;
    // top: 100px;
    background-color: #b1b5c1;
    color:#fff;
    border-radius: 10px;
}

// 滚动列表
.infinite-list {
  height: 200px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
</style>
